import { Box } from "@mui/material";
import styled from "styled-components";
import BottomBar from "./BottomBar";

const Layout = (props: any) => (
  <div>
    <Box
      sx={{
        display: "flex",
        flexDirection: "column-reverse",
        height: "100vh",
      }}
    >
           <BottomBar />
      <Main>{props.children}</Main>

 
    </Box>
  </div>
);
const Main = styled.div`
  display: flex;
  flex-direction: column;
  overflow-y: auto; 
  
  background-color:#f1f2f6;
  flex-grow: 1;
 
`;
export default Layout;
